<template>
  <div class="left-wrap">
    <!-- 设备登记，昨日在透数 -->
    <div @click="shwDeviceNum">
      <div class="chart-title" @click="shwDeviceNum">设备登录数</div>
      <div class="chart-content">
        <span v-for="(item, index) in deviceNum" :key="index">
          {{ item }}
        </span>
      </div>
      <div class="chart-title" style="margin-top: 20px">昨日在透数</div>
      <div class="chart-content">
        <span v-for="(item, index) in lastDialysis" :key="index">
          {{ item }}
        </span>
      </div>
    </div>
    <!-- 原发病 -->
    <div>
      <v-chart :options="rotopathyOptions" />
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    deviceNum: {
      type: Array,
      default: () => {
        return []
      }
    },
    lastDialysis: {
      type: Array,
      default: () => {
        return []
      }
    },
    rotopathyOptionsrData: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      options: {}
    }
  },
  computed: {
    rotopathyOptions() {
      let res = this.rotopathyOptionsrData
      if (res) {
        const dataX = []
        const dataY = []
        res = res
          .sort((a, b) => {
            return b.value - a.value
          })
          .slice(0, 8)
          .map(item => {
            dataX.push(item.platformPrimaryDisease)
            dataY.push(item.total)
          })
        return {
          title: {
            text: '原发病',
            left: '0px',
            top: '0px',
            textStyle: {
              color: '#666',
              fontSize: 16,
              fontWeight: '700'
            }
          },
          // label: { show: true },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            formatter: v => {
              return `${v[0].name} : ${v[0].value} 人`
            }
          },
          legend: { show: false },
          grid: {
            top: '30px',
            left: '0px',
            right: '0',
            bottom: 0,
            containLabel: true
          },
          xAxis: {
            type: 'value',
            show: false
            // boundaryGap: [0, 0.01]
          },
          yAxis: {
            type: 'category',
            splitLine: {
              show: false
            },
            axisLabel: {},
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            inverse: true,
            data: dataX // ['巴西', '印尼', '美国', '印度', '中国', '总数(万)']
          },
          series: [
            {
              name: '',
              type: 'bar',
              barWidth: '16px',
              label: {
                normal: {
                  show: true,
                  fontSize: 12
                }
              },
              // barHeight: '100px',
              itemStyle: {
                label: { show: true },
                normal: {
                  color: params => {
                    if (params.dataIndex === 0) return '#FF7474'
                    else if (params.dataIndex === 1) return '#F6DE54'
                    else if (params.dataIndex === 2) return '#22e089'
                    return '#57c3ff'
                  }
                }
                // padding: [0, 4, 0, 5]
              },
              barMinHeight: 30,
              barMaxHeight: 60,
              data: dataY // [18203, 23489, 29034, 104970, 131744, 630230]
            }
          ]
        }
      }
      return null
    }
  },
  methods: {
    shwDeviceNum() {
      this.$emit('shwDeviceNum', 1)
    }
  }
}
</script>
<style lang="scss" scoped>
.left-wrap {
  width: inherit;
  display: flex;
  > div {
    &:first-child {
      width: 150px;
      height: 210px;
      margin-right: 70px;
      box-sizing: border-box;
    }
    &:last-child {
      width: 230px;
      height: 252px;
      box-sizing: border-box;
    }
  }
}
</style>
